<template>
  <div id="inventoryhold" v-loading="loading">
    <v-tableTitle
      :btnConfig="btnConfig"
      :tableSelectData="tableSelectData"
      :title="$t('ex.inventoryhold')"
      @del="del"
      @pressId="pressId"
      @pressLoc="pressLoc"
      @pressTuo="pressTuo"
    ></v-tableTitle>
    <v-table
      :page="page"
      :pageSize="pageSize"
      :tableConfig="tableConfig"
      :tableData="tableData"
      :total="total"
      @findData="getTableData"
      @getTableData="getTableData"
      @searhData="searhData"
      @selectData="selectData"
      @setdialog="setdialog"
      @upData="getTableData"
      ref="table"
    ></v-table>
    <el-dialog
      :modal="false"
      :visible.sync="dialogVisible"
      title=""
      v-if="dialogVisible"
      :close-on-click-modal="false"
      top="0"
      v-dialogDrag
      width="700px"
    >
      <v-dialog
        ref="dialog"
        :dialogConfig="dialogConfig"
        :dialogUrl="dialogUrl"
      ></v-dialog>
      <span slot="footer" class="dialog-footer">
        <el-button :disabled="!this.btnPermNameList.includes('WM06020505')" @click="close">{{$t('common.cancel')}}</el-button>
        <el-button :disabled="!this.btnPermNameList.includes('WM06020506')" type="primary" @click="affirm">{{$t('common.confirm')}}</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script type="text/ecmascript-6">
import tableTitle from "commons/TableTitle";
import table from "commons/Table";
import baseMixin from "@/mixins/BaseMixin";
import config from "./Config";
import dialog from "./dialog";

export default {
  name: "inventoryhold",
  mixins: [baseMixin, config],
  data () {
    return {
      loading: false,
      tableConfig: [
        {
          label: this.$t('ex.hold'),
          prop: "hold",
          input: "select",
          options: [
            { code: '0', description: this.$t('code.no') },
            { code: '1', description: this.$t('code.yes') }
          ],
        },
        {
          label: this.$t('bill.lot'),
          prop: "lot",
          input: "input"
        },
        {
          label: this.$t('in.lpn'),
          prop: "id",
          input: "input",
        },
        {
          label: this.$t('config.loc'),
          prop: "loc",
          input: "input",
        },
        {
          label: this.$t('common.status'),
          prop: "status",
          input: "select",
          options: this.getOptions("queryInventoryholdcodeDropDown")
        },
        {
          label: this.$t('common.note'),
          prop: "comments",
          input: "input",
        },
        {
          label: this.$t('ex.qty1'),
          prop: "qty",
        },
        {
          label: this.$t('ex.qtyavailable'),
          prop: "kyqty",
        },
        {
          label: this.$t('outbound.qtyallocated'),
          prop: "qtyallocated",
        },
        {
          label: this.$t('outbound.qtypicked'),
          prop: "qtypicked",
        },
        {
          label: this.$t('ex.dateon'),
          prop: "dateon",
          input: "date",
        },
        {
          label: this.$t('ex.whoon'),
          prop: "whoon",
          input: "input",
        },
        {
          label: this.$t('ex.dateoff'),
          prop: "dateoff",
          input: "date",
        },
        {
          label: this.$t('ex.whooff'),
          prop: "whooff",
          input: "input",
        },
      ],
      tableData: [],
      pageSize: 10,
      page: 1,
      total: 10,
      tableSelectData: [],
      tableSearhData: {},
      dialogVisible: false,
      dialogConfig: [],
      dialogUrl: "",
      type: ""
    };
  },
  computed: {
    btnConfig () {
      return [
        { label: this.$t('common.delete'), certigier: this.deleteStatus||!this.btnPermNameList.includes('WM06020504'), disabled: true, invalid: "del" },
        { label: this.$t('ex.freezebyid'), certigier: this.lotStatus||!this.btnPermNameList.includes('WM06020501'), invalid: "pressId" },
        { label: this.$t('ex.freezebyloc'), certigier: this.locStatus||!this.btnPermNameList.includes('WM06020502'), invalid: "pressLoc" },
        { label: this.$t('ex.freezebytp'), certigier: this.palletStatus||!this.btnPermNameList.includes('WM06020503'), invalid: "pressTuo" },
      ]
    }
  },
  created () {
  },
  methods: {
    pressId () {
      this.dialogConfig = [
        {
          label: this.$t('config.shipper'),
          prop: "storerkey",
          input: "input",
        },
        {
          label: this.$t('config.sku'),
          prop: "sku",
          input: "input"
        },
        {
          label: this.$t('bill.lot'),
          prop: "lot",
          input: "input",
        },
        {
          label: this.$t('config.batchProp',{no:'01'}),
          prop: "lottable01",
        },
        {
          label: this.$t('config.batchProp',{no:'02'}),
          prop: "lottable02",
        },
        {
          label: this.$t('config.batchProp',{no:'03'}),
          prop: "lottable03",
        },
        {
          label: this.$t('config.batchProp',{no:'04'}),
          prop: "lottable04",
          input: "date",
          disabled: true

        },
        {
          label: this.$t('config.batchProp',{no:'05'}),
          prop: "lottable05",
        }
      ];
      this.dialogUrl = "/queryLotListByInventoryhold"
      this.dialogVisible = true;
      this.type = "pressId";
    },
    pressLoc () {
      this.dialogConfig = [
        {
          label: this.$t('config.loc'),
          prop: "loc",
          input: "input",
        },
        {
          label: this.$t('common.type'),
          prop: "locationtype",
          input: "input"
        },
        {
          label: this.$t('ex.putawayzone'),
          prop: "putawayzone",
          input: "input",
        },
        {
          label: this.$t('config.locFlag'),
          prop: "locationflag",
          input: "input"
        },
        {
          label: this.$t('config.locCategory'),
          prop: "locationcategory",
          input: "input"
        },
        {
          label: this.$t('config.locHandler'),
          prop: "locationhandlingdescr",
          input: "input"
        },
        {
          label: "ABC",
          prop: "abcdescr",
          input: "input"
        },
        {
          label: this.$t('security.tier'),
          prop: "loclevel",
          input: "input"
        }
      ];
      this.dialogUrl = "/queryLocListByInventoryhold"
      this.dialogVisible = true;
      this.type = "pressLoc";
    },
    pressTuo () {
      this.dialogConfig = [
        {
          label: this.$t('config.sku'),
          prop: "sku",
          input: "input",
        },
        {
          label: this.$t('config.shipper'),
          prop: "storerkey",
          input: "input"
        },
        {
          label: this.$t('in.lot'),
          prop: "lot",
          input: "input",
        },
        {
          label: this.$t('config.loc'),
          prop: "loc",
          input: "input"
        },
        {
          label: this.$t('in.lpn'),
          prop: "id",
          input: "input"
        },
        {
          label: this.$t('common.status'),
          prop: "status",
          input: "input"
        },
        {
          label: this.$t('config.num'),
          prop: "qty",
          input: "input"
        }
      ];
      this.dialogUrl = "/queryLotxlocxidListByInventoryhold"
      this.dialogVisible = true;
      this.type = "pressTuo";
    },
    close () {
      this.dialogVisible = false;
    },
    async affirm () {
      let status = this.$refs.dialog.status;
      let comments = this.$refs.dialog.comments;
      let tableSelectData = this.$refs.dialog.tableSelectData;
      let data = {};
      let url = "";
      if (status == "") {
        this.$message.error(this.$t('msg.msg24'));
        return;
      }
      if (this.type == "pressTuo") {
        data = {
          comments: comments,
          lotxlocxidlist: tableSelectData,
          status: status
        };
        url = `/insertInventoryholdByLotxlocxid`
      } else if (this.type == "pressId") {
        data = {
          comments: comments,
          lotlist: tableSelectData,
          status: status
        };
        url = `/insertInventoryholdByLot`
      } else if (this.type == "pressLoc") {
        data = {
          comments: comments,
          loclist: tableSelectData,
          status: status
        };
        url = `/insertInventoryholdByLoc`
      }
      try {
        let res = await this.$api.post(url, data);
        
          this.$message.success(res.returnMgr);
          this.dialogVisible = false;
          let page = sessionStorage.getItem('page');
          this.getTableData(page, this.tableSearhData);
        
      } catch (e) {
        this.$message.error(e)
      }
    },
    //选中的内容
    selectData (data) {
      this.tableSelectData = data;
    },
    //删除
    async del (data) {
      try {
        let res = await this.$api.post(`/deleteInventoryhold`, data);
        
          this.$message.success(res.returnMgr);
          let page = sessionStorage.getItem('page');
          this.getTableData(page, this.tableSearhData);
          
        
      } catch (e) {
        this.$message.error(e);
      }
    },
    async getTableData (page, data) {
      try {
        this.loading = true;
        let res = await this.$api.post(`/queryInventoryhold/${page}`, data);
        
          this.tableData = res.page.list;
          this.pageSize = res.page.pageSize;
          this.page = res.page.curpage;
          this.total = res.page.total;
      } catch (e) {
        this.$message.error(e);
      } finally {
        this.loading = false;
      }
    },
    //搜索的值
    searhData (data, up) {
      if (!up) {
        this.tableSearhData = data;
      } else {
        this.tableSearhData = data;
        this.getTableData(1, this.tableSearhData);
      }
    },
    //设置弹框
    setdialog (data) {
      this.$store.commit("setRouteData", data);
      this.$router.push({ name: 'inventoryholdDeawer' });
    },
  },
  mounted () {
    
    this.$store.commit("setSkip", {});
    this.$store.commit("setNewFlag", false);
    this.$store.commit("setRouteData", {});
    this.getTableData(1, {});
  },
  watch: {
    tableSelectData (data) {
      if (this.permissionStatus) {
        if (data.length > 0) {
          this.deleteStatus = false;
        } else {
          this.deleteStatus = true;
        }
      }
    }
  },
  components: {
    "v-tableTitle": tableTitle,
    "v-table": table,
    "v-dialog": dialog
  }
};
</script>

<style scoped>
#inventoryhold {
  width: 100%;
  height: 99%;
  padding-top: 6px;
}
</style>
